<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <title>设置属性</title>
    <link href="./layui/css/layui.css" id="layui_theme_css" rel="stylesheet">
</head>
<body>
<form action="" class="layui-form" lay-filter="prop_from">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input autocomplete="off" class="layui-input" id="name" lay-verify="required|name" name="name"
                   placeholder="请输入名称" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">输入消息</label>
        <div class="layui-input-block">
            <select id="input_message" lay-creatable="" lay-search="" name="input_message">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-primary" lay-filter="save" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>

<script src="./layui/layui.js"></script>
<script src="./axios.min.js"></script>
<script>
    var $ = layui.$;
    var layer = layui.layer;
    var form = layui.form;
    window.layer=layer;
    var ref = new URL(window.location.href);
    const params = new URLSearchParams(ref.search);
    var id = params.get('id');
    if(id == null){
        layer.msg("id 为空");
        id = 1;
    }
    var host=window.location.hostname;
    console.log("host="+host);
    var url=`http://${host}:18518/crud.svc/AidbTransformPropertyTabs(${id})`;
    //初始化值
    var config = {
       method: 'get',
       url: url,
       headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
       }
    };
    axios(config).then(function (response) {
        if(response.status!=200){
            layer.msg("读取数据错误");
            return;
        }
        debugger;
        console.log(response.data.xmlcnt);
        var xmlString= response.data.xmlcnt;
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlString, "text/xml");
        console.log(xmlDoc.getElementsByTagName("input_message"))
        const name = xmlDoc.getElementsByTagName("name")[0].innerHTML;
        console.log("name="+name);
        const inputMessage = xmlDoc.getElementsByTagName("input_message")[0].innerHTML;
        console.log("inputMessage="+inputMessage);
        //读取前一个节点输入字段作为下拉框的值;
        var prefields= response.data.prefields;
        console.log("prefields="+prefields);
        console.log("input_message=");
        console.log($("#input_message"));
        $("#input_message").empty();
        //去掉[];
        prefields=prefields.substring(1, prefields.length - 1);
        var arr  = prefields.split(',')
        arr.forEach((item) => {
          $("#input_message").append(new Option(item,item));
        });
        form.val('prop_from', {
          "name": name,
          "input_message": inputMessage,
        });
        form.render();

    }).catch(function (error) {
       layer.msg(error);
    });
    // 自定义验证规则
    form.verify({
        // 验证用户名，且为必填项
        name: function(value, elem){
          if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
            return '名称不能有特殊字符';
          }
          if (/(^_)|(__)|(_+$)/.test(value)) {
            return '名称首尾不能出现下划线';
          }
          if (/^\d+$/.test(value)) {
            return '名称不能全为数字';
          }
        },
    });
    debugger;
    form.on('submit(save)', function(data){
        var data = form.val('prop_from');
        console.log("id="+id);
        var xml = '<root>';
        xml += `<id>${id}</id}>`;
        for (let key in data) {
            console.log(key+"="+data[key]);
            xml += `<${key}>${data[key]}</${key}>`;
        }
        xml += '</root>';
        console.log(xml);
        debugger;
        var data = JSON.stringify({
           "id": id,
           "xmlcnt": xml
        });
        var config = {
           method: 'put',
           url: url,
           headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
           },
           data : data
        };
        axios(config).then(function (response) {
            if(response.status==200)
                layer.msg("保存成功");
            console.log(response);
        })
        .catch(function (error) {
           layer.msg(error);
        });
        return false;
    });
</script>
</body>
</html>